<template>
  <div>
    <van-tabbar  v-model="active" bind:change="onChange"  active-color="#D81E06" inactive-color="#000" ><!-- route -->
      <van-tabbar-item badge="" to="/home">
        <span>首页 </span>
        <template #icon="props">
          <img :src="props.active ? icon.homeac : icon.home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item badge="" to="/classify">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? icon.classac : icon.class" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item badge="" to="/cart">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active ? icon.cartac: icon.cart" />
        </template>
      </van-tabbar-item>
  
      <van-tabbar-item badge="" to="/me">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.meac: icon.me "/>
        </template>
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>


<style lang="" scoped> 

</style>
<script>

  export default{
    data () {
      return {
        active: 0,
        icon:{
          home:require("../../assets/img/index/index-w.png"),
          homeac:require("../../assets/img/index/index-x.png"),
          class:require("../../assets/img/index/fl-w.png"),
          classac:require("../../assets/img/index/fl-x.png"),
          cart:require("../../assets/img/index/gwc-w.png"),
          cartac:require("../../assets/img/index/gwc-x.png"),
          me:require("../../assets/img/index/my-w.png"),
          meac:require("../../assets/img/index/my-x.png")
        },

      }
    },
    computed: {
      tt(){
        return this.active
      }
    },
    methods: {
      onChange(e){
        console.log(e,"jjjjjjjjjjjjjj")
      },
      classfy(){
          
        if(this.active===1){
          console.log(this.active,"zzzzzzzzzzz");
          this.$router.push("Classify")
        }

        // console.log
      }
    }
  }


</script>